import React, { Component } from 'react'
import Mock from "mockjs"
const data=Mock.mock({
    "list|10":[{
        "id":"@id",
        "title":"@ctitle(3)",
        "child|2-5":[{
            img:"@image(100x100,@color)",
            "title":"@ctitle",
            "price|10-30.2":0,
        }]
    }]
})


export class tab extends Component {
    constructor(props){
        super(props)
        this.state={
            tablist:data.list,
            i:0
        }
    }
  render() {
      const {tablist,i}=this.state
    return (
      <div className='tab'>
          <ul className="left">
              <li >{tablist.map((item,index)=>{
                 return <div key={item.id} onClick={()=>{
                     this.setState({
                         i:index
                     })
                 }} className={index===i ?'on' :'' } >{item.title} </div>
              })}</li>
          </ul>
          <ul className="right">
              <li> {tablist[i].child.map((item,index)=>{
                  return <div key={index}> 
                  <img src={item.img}/>
                  <p>{item.price}元</p>
                  <p>{item.title}</p>
                       </div>
              })}</li>
          </ul>
      </div>
    )
  }
}

export default tab